import React from 'react'
// 测试 Button 组件
import Button, { ButtonType, ButtonSize } from './components/Button/button'
// 测试 Menu 组件
import Menu from './components/Menu/menu'
import MenuItem from './components/Menu/menuItem'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* 解决test App报错 */}
        <a href="https://react.docschina.org/">Learn React</a>
        {/* 测试样式系统是否生效 */}
        <h3>1. 测试样式系统是否生效</h3>
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <hr />
        <code>const a = 'b'</code>
        <hr />
        {/* 测试 Button 组件 - part1 */}
        <h3>2. 测试Button组件</h3>
        <Button>Hello</Button>
        <Button disbaled>Disabled Button</Button>
        <Button btnType={ButtonType.Primary} size={ButtonSize.large}>
          Large Primary
        </Button>
        <Button btnType={ButtonType.Danger} size={ButtonSize.small}>
          Small Danger
        </Button>
        <Button btnType={ButtonType.Link} href="https://www.baidu.com">
          Baidu Link
        </Button>
        <Button btnType={ButtonType.Link} href="https://www.baidu.com" disbaled>
          Disabled Link
        </Button>
        <hr />
        {/* 测试 Button 组件 - part2 */}
        <h3>3. 测试Button组件是否能够支持原生button的属性和方法</h3>
        <Button autoFocus>Auto Focus Button</Button>
        <Button
          onClick={(e) => {
            e.preventDefault()
            alert(123)
          }}
        >
          Click Button
        </Button>
        <Button className="custom">Custom Class Button</Button>
        <Button btnType={ButtonType.Link} href="https://www.baidu.com" target="_blank">
          Custom Props ALink
        </Button>
        <hr />
        {/* 测试 Menu 组件 */}
        <h3>4. 测试Menu组件</h3>
        <Menu
          defaultIndex={0}
          onSelect={(index: number) => {
            alert(index)
          }}
        >
          <MenuItem index={0}>col link</MenuItem>
          <MenuItem index={1} disabled>
            col link 2
          </MenuItem>
          <MenuItem index={2}>col link 3</MenuItem>
        </Menu>
        <Menu
          defaultIndex={0}
          onSelect={(index: number) => {
            alert(index)
          }}
          className="menu-vertical"
        >
          <MenuItem index={0}>col link</MenuItem>
          <MenuItem index={1} disabled>
            col link 2
          </MenuItem>
          <MenuItem index={2}>col link 3</MenuItem>
        </Menu>
      </header>
    </div>
  )
}

export default App
